<template>
	<view class="index">

		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<ImageList ref="ImageListRef"></ImageList>
			</scroll-view>
		</view>

		<!-- <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Drawing ref="DrawingRef"></Drawing>
			</scroll-view>
		</view> -->
		<!-- <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Evolve ref="evolve"></Evolve>
			</scroll-view>
		</view> -->
		
		<!-- <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<About ref="about"></About>
			</scroll-view>
		</view> -->

		<!-- <tn-tabbar v-model="currentIndex" :list="tabbarList" activeColor="#838383" inactiveColor="#AAAAAA"
			bgColor="#000000" activeIconColor="tn-cool-bg-color-7" :animation="true" :safeAreaInsetBottom="true"
			@change="switchTabbar"></tn-tabbar> -->

	</view>
</template>

<script>
	import About from '../moyi/about.vue'
	import Ai from '../moyi/ai.vue'
	import Evolve from '../moyi/evolve.vue'
	import ImageList from '../moyi/ImageList.vue'
	import Drawing from '../moyi/Drawing.vue'
	export default {
		components: {
			About,
			Ai,
			Evolve,
			ImageList,
			Drawing
		},
		data() {
			return {
				// 底部tabbar菜单数据
				tabbarList: [{
						title: '画廊',
						activeIcon: 'image-fill',
						inactiveIcon: 'image',
						activeColor: '#01BEFF'
					},
					// {
					// 	title: '画言',
					// 	activeIcon: 'theme-fill',
					// 	inactiveIcon: 'theme',
					// 	activeColor: '#01BEFF'
					// },
					// {
					//   title: '',
					//   activeIcon: 'honor-fill',
					//   inactiveIcon: 'honor'
					// },
					//  {
					//    title: '添加任务Ai绘画',
					//    activeIcon: 'theme-fill',
					//    inactiveIcon: 'theme',
					// activeIconColor: '#FFFFFF',
					// inactiveIconColor: '#FFFFFF',
					// out: true
					//  },
					//  {
					//    title: '查询',
					//    activeIcon: 'search-list-fill',
					//    inactiveIcon: 'search-list',
					//  },
					//  {
					//    title: '关于',
					//    activeIcon: 'tip-fill',
					//    inactiveIcon: 'tips',
					//  },

					// {
					//   title: '会员',
					//   activeIcon: 'vip-fill',
					//   inactiveIcon: 'vip',
					//   activeIconColor: '#FFFFFF',
					//   inactiveIconColor: '#FFFFFF',
					//   iconSize: 50,
					//   out: true
					// },
					// {
					//   title: '发现',
					//   activeIcon: 'discover-fill',
					//   inactiveIcon: 'discover',
					//   count: 100
					// },
					// {
					//   title: '图鸟',
					//   activeIcon: 'computer-fill',
					//   inactiveIcon: 'computer',
					//   dot: true
					// }
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: []
			}
		},
		onLoad(options) {
			const index = Number(options.index || 0)
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
				return index === tabbar_index
			})
			this.switchTabbar(index)

			uni.preloadPage({
				url: "/pages/moyi/Preview"
			});


		},
		methods: {
			// 切换导航
			switchTabbar(index) {
				this._switchTabbarPage(index)
			},


			// 导航页面滚动到底部
			tabbarPageScrollLower(e) {
				console.log(this.currentIndex, '滑动到了底部')
				if (this.currentIndex === 0) {
					this.$refs.ImageListRef.getRandomData && this.$refs.ImageListRef.pageScrollLower()
				}
			},
			// 切换导航页面
			_switchTabbarPage(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				this.currentIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		background-color: black;
		overflow: hidden;
		height: 100%;
	}

	.custom-tabbar-page {
		height: 100vh;
		// height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));
	}
</style>